<template>
	<view class="search">
		<!-- <input class="input" type="text" value="" placeholder="默认搜索"/> -->
		<uni-easyinput v-model="value" prefixIcon="search" :trim="both" :placeholder="defaultSearch" @input="search">
		</uni-easyinput>

		<view class="box" v-show="value.length ==0">
			<!-- 搜索历史 -->
			<view class="searhistory" v-if="searchHistory.length !=0">
				<text>历史</text>
				<view class="content">
					<view class="item" v-for="(item,index) in searchHistory" :key="index">
						{{item}}
					</view>
				</view>
				<text class="iconfont icon-shanchu delete" @click="deleteHistory"></text>
			</view>

			<!-- 热搜榜 -->
			<view class="hotSearch" v-if="hotSearch.length !=0">
				<text>热搜榜</text>
				<view class="contentHotSearch">
					<view class="item" v-for="(item,index) in hotSearch" :key="index" @click="toPlaySong(item)">
						<view class="index">
							{{index+1}}
						</view>
						<view class="name">
							<view class="one-lint-hidden">{{item.searchWord}}</view>
							<view class="one-lint-hidden">{{item.content}}</view>
						</view>
						<view class="icon">
							<image :src="item.iconUrl" style="width: 32rpx;height: 32rpx;" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 搜索出来的列表 -->
		<view class="sousuoList" v-if="value !== ''">
			<!-- tab -->
			<v-tabs v-model="current" :tabs="tabs" @change="changeTab"></v-tabs>

			<!-- 搜索到的内容 -->
			<view class="sousuoListItem">
				<!-- 单曲 类型的搜索 -->
				<view class="sousuoListItem-gequ" v-show="current === 0">
					<view class="title">
						搜索“{{value}}”，找到 <text>{{sousuoList[0].data.songCount}}</text> 首单曲
					</view>
					<view class="sousuoListItem-gequ-item" v-for="item in sousuoList[0].data.songs" :key="item.id"
						@click="sousuoListItemGequToBofang(item.id)">
						<text class="iconfont icon-yinyue"></text>
						<view class="name one-lint-hidden">
							<text>{{item.name}}</text>
							<text>-{{item.artists[0].name}}</text>
						</view>
					</view>
				</view>

				<!--  专辑 类型的搜索 -->
				<view class="sousuoListItem-zhuanji" v-show="current === 1">
					<view class="title">
						搜索“{{value}}”，找到 <text>{{sousuoList[1].data.albumCount}}</text> 张专辑
					</view>
					<view class="sousuoListItem-zhuanji-item">

						<view class="sousuoListItem-zhuanji-item-box" v-for="item in sousuoList[1].data.albums"
							:key="item.id">
							<image :src="item.picUrl" mode=""></image>
							<view class="one-lint-hidden">
								{{item.name}}
							</view>
							<view class="one-lint-hidden" style="font-size: 26rpx;color: #C8C7CC;">
								{{item.artists[0].name}}
							</view>
						</view>

					</view>
				</view>

				<!-- 歌手 类型的搜索 -->
				<view class="sousuoListItem-geshou" v-show="current === 2">
					<view class="title">
						搜索“{{value}}”，找到 <text>{{sousuoList[2].data.artistCount}}</text> 位歌手
					</view>
					<view class="sousuoListItem-geshou-item">

						<view class="sousuoListItem-geshou-item-box" v-for="item in sousuoList[2].data.artists"
							:key="item.id">
							<image :src="item.picUrl" mode=""></image>
							<view class="one-lint-hidden">
								{{item.name}}
							</view>
						</view>

					</view>
				</view>

				<!-- 歌单 类型的搜索 -->
				<view class="sousuoListItem-gedan" v-show="current === 3">
					<view class="title">
						搜索“{{value}}”，找到 <text>{{sousuoList[3].data.playlistCount}}</text> 个歌单
					</view>
					<view class="sousuoListItem-gedan-item" v-for="item in sousuoList[3].data.playlists" :key="item.id"
						@click="sousuoListItemGedanTo(item.id)">

						<image :src="item.coverImgUrl" mode=""></image>
						<view class="shou one-lint-hidden">
							{{item.trackCount}}首
						</view>
						<view class="author one-lint-hidden">
							by &nbsp; {{item.creator.nickname}}
						</view>
					</view>
				</view>


				<!-- 用户 类型的搜索 -->
				<view class="sousuoListItem-yonghu" v-show="current === 4">
					<view class="title">
						搜索“{{value}}”，找到 <text>{{sousuoList[4].data.userprofileCount}}</text> 位用户
					</view>
					<view class="sousuoListItem-yonghu-item">

						<view class="sousuoListItem-yonghu-item-box" v-for="item in sousuoList[4].data.userprofiles"
							:key="item.userId" @click="sousuoListItemUserInfoTo(item.userId)">
							<image :src="item.avatarUrl" mode=""></image>
							<view class="one-lint-hidden">
								{{item.nickname}}
							</view>
							<view class="more-lint-hidden signature">
								{{item.signature}}
							</view>
						</view>

					</view>
				</view>


				<!-- mv  类型的搜索 -->
				<view class="sousuoListItem-mv" v-show="current === 5">
					<view class="title">
						搜索“{{value}}”，找到 <text>{{sousuoList[5].data.mvCount}}</text> 个MV
					</view>
					<view class="sousuoListItem-mv-item">

						<view class="sousuoListItem-mv-item-box" v-for="item in sousuoList[5].data.mvs" :key="item.id"
							@click="sousuoListItemMvTo(item.id)">
							<view class="" style="position: relative;">
								<image :src="item.cover" mode="">

								</image>
								<view class="playCount">
									{{item.playCount > 9999 ? item.playCount/1000 : item.playCount}}万次
								</view>
							</view>
							<view class="one-lint-hidden">
								{{item.name}}
							</view>
							<view class="one-lint-hidden author">
								{{item.artists[0].name}}
							</view>

						</view>

					</view>
				</view>

				<!-- 视频  类型的搜索   -->
				<view class="sousuoListItem-sp" v-show="current === 6">
					<view class="title">
						搜索“{{value}}”，找到 <text>{{sousuoList[6].data.videoCount}}</text> 个视频
					</view>
					<view class="sousuoListItem-sp-item">

						<view class="sousuoListItem-sp-item-box" v-for="item in sousuoList[6].data.videos"
							:key="item.vid" @click="sousuoListItemShipinTo(item.vid)">
							<view class="" style="position: relative;">
								<image :src="item.coverUrl" mode="">

								</image>
								<view class="playCount">
									{{item.playTime > 9999 ? item.playTime/1000 : item.playTime}}万次
								</view>
							</view>
							<view class="one-lint-hidden">
								{{item.title}}
							</view>
							<view class="one-lint-hidden author">
								{{item.creator[0].userName}}
							</view>

						</view>

					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let tabsId = [{
			name: '单曲',
			id: 1,
			index: 0
		},
		{
			name: '专辑',
			id: 10,
			index: 1
		},
		{
			name: '歌手',
			id: 100,
			index: 2
		},
		{
			name: '歌单',
			id: 1000,
			index: 3
		},
		{
			name: '用户',
			id: 1002,
			index: 4
		},
		{
			name: 'MV',
			id: 1004,
			index: 5
		},
		{
			name: '视频',
			id: 1014,
			index: 6
		},
	]
	export default {
		data() {
			return {
				defaultSearch: '请输入搜索内容', // 默认搜索
				defaultSearchTimer: null, // 默认搜索的定时器
				searchTimer: null, // 搜索的定时器
				searchHistory: [], // 搜索历史
				hotSearch: [], // 获取 热搜榜
				value: '', // 输入框默认值
				sousuoList: [{
						name: '单曲',
						id: 1,
						index: 0,
						data: []
					},
					{
						name: '专辑',
						id: 10,
						index: 1,
						data: []
					},
					{
						name: '歌手',
						id: 100,
						index: 2,
						data: []
					},
					{
						name: '歌单',
						id: 1000,
						index: 3,
						data: []
					},
					{
						name: '用户',
						id: 1002,
						index: 4,
						data: []
					},
					{
						name: 'MV',
						id: 1004,
						index: 5,
						data: []
					},
					{
						name: '视频',
						id: 1014,
						index: 6,
						data: []
					}
				], // 搜索列表
				tabs: ['单曲', '专辑', '歌手', '歌单', '用户', 'MV', '视频'], // 搜索的  tabs
				current: 0, // 默认激活
			};
		},
		onLoad() {
			// 默认搜索 getDefaultSearch
			this.getDefaultSearch()
			// 开启循环 请求 默认搜索
			this.defaultSearchTimer = setInterval(() => {
				this.getDefaultSearch()
			}, 5000)
			// 默认读取 本地存储的 搜索历史
			this.getSearchHistory()
			// 获取热搜榜
			this.getHotSearch()
			console.log(tabsId);
		},
		methods: {
			// 获取默认搜索
			async getDefaultSearch() {
				let {
					data
				} = await uni.$request('get', '/search/default')
				// console.log(data);
				if (data.code === 200) {
					this.defaultSearch = data.data.showKeyword
				}

			},
			// 获取本地的搜索历史
			getSearchHistory() {
				if (uni.getStorageSync('SearchHistory') == '') {
					console.log('本地存储为空');
					return
				} else {
					let hot = JSON.parse(uni.getStorageSync('SearchHistory'))
					// console.log('hot',hot);
					this.searchHistory = hot
				}

			},
			// 获取 热搜榜
			async getHotSearch() {
				console.log('获取热搜榜');
				let {
					data
				} = await uni.$request('get', '/search/hot/detail')
				if (data.code === 200) {
					this.hotSearch = data.data
				}
			},
			// 点击 热搜榜歌曲，  跳转到 歌曲播放页面
			toPlaySong(item){
				console.log(item,'即将播放');
			},
			// 在输入框输入搜索后，发起请求
			async getSearch(value, type) {
				let {
					data
				} = await uni.$request('get', '/search', {
					keywords: value,
					type: type
				})
				if (data.code === 200) {
					console.log('获取结果');
					// id 就是 搜索的类型
					let index = this.sousuoList.findIndex(item => item.id === type)
					this.sousuoList[index].data = data.result
					// console.log('结果',this.sousuoList[index].data);
				}

			},
			// 在 搜索框 输入了搜索内容
			search(value) {
				// type
				let type = this.sousuoList[this.current].id

				clearTimeout(this.searchTimer)
				this.searchTimer = setTimeout(() => {
					this.getSearch(value, type)
					if (this.searchHistory.indexOf(value.trim() !== -1)) {
						//  有的情况  注意：如果一开始就没有等 那 -1===-1 必然成立  bug
						// if(JSON.parse(uni.getStorageSync('SearchHistory')).indexOf(value.trim() !== -1))
						if (value.trim() === '') {
							return
						}

					} else {
						// 如果 没有 则 不动
						console.log('搜索词加入本地存储', value);
						this.searchHistory.unshift(value.trim())
					}
					this.searchHistory.unshift(value.trim())
					uni.setStorageSync('SearchHistory', JSON.stringify(this.searchHistory))
				}, 1000)
			},
			// 删除 搜索历史记录的本地存储
			deleteHistory() {
				uni.showModal({
					title: '提示',
					content: '你是否要删除全部的搜索历史记录',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							this.searchHistory = []
							uni.removeStorageSync('SearchHistory');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			changeTab(index) {
				this.current = index
				let type = this.sousuoList[this.current].id
				this.getSearch(this.value, type)
			},
			// 点击搜索到的 歌曲 的事件
			sousuoListItemGequToBofang(id) {
				uni.navigateTo({
					url: '/subPackages/pages/songPlay/songPlay?id=' + id,
				})
			},
			// 点击搜索到的 歌单 的事件
			sousuoListItemGedanTo(id) {
				uni.navigateTo({
					url: '/pages/songList/songList?id=' + id
				})
			},
			// 查看  用户信息  
			sousuoListItemUserInfoTo(id) {
				console.log('id', id);
				uni.navigateTo({
					url: '/subPackages/pages/userInfo/userInfo?id=' + id
				})
			},
			// 查看  mv 信息
			sousuoListItemMvTo(id) {
				console.log('mvId', id);
				uni.navigateTo({
					url: '/subPackages/pages/mv/mv?id=' + id
				})
			},
			// 查看  视频 信息
			sousuoListItemShipinTo(id) {
				console.log('vid',id);
				uni.navigateTo({
					url: '/subPackages/pages/shipin/shipin?id=' + id
				})
			},
		},
		onUnload() {
			clearInterval(this.defaultSearchTimer)
		}
	}
</script>

<style lang="less">
	@keyframes search1 {
		from {
			transform: rotate(0deg);
			opacity: .3;

		}

		to {
			transform: rotate(360deg);
			opacity: 1;
		}
	}

	.search {
		/deep/ .uni-easyinput {
			background-color: #fff;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
		}

		/deep/ .v-tabs {
			border-radius: 10rpx;
		}

		background-color: #F1F1F1;
		padding: 20rpx;

		.input {
			height: 60rpx;
			border-radius: 20rpx;
			background-color: #fff;
			padding-left: 20rpx;
			margin-bottom: 20rpx;
		}

		// 搜索记录
		.searhistory {
			padding: 20rpx;
			margin-top: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			// height: 200rpx;
			display: flex;

			>text {
				font-size: 40rpx;
				color: #333;
				width: 80rpx;
				// &:nth-child(2){
				// 	width: 32rpx;
				// }
			}

			.delete {
				width: 32rpx;
			}

			.content {
				flex: 1;
				display: flex;
				flex-wrap: wrap;
				padding: 0 10rpx;

				.item {
					padding: 0 10rpx;
					height: 55rpx;
					line-height: 55rpx;
					border-radius: 10rpx;
					background-color: #f2f2f2;
					margin-right: 20rpx;
				}
			}
		}

		// 热搜榜
		.hotSearch {
			padding: 20rpx;
			margin-top: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;

			// height: 400rpx;
			>text {
				font-size: 40rpx;
				color: #333;
				width: 80rpx;
				// &:nth-child(2){
				// 	width: 32rpx;
				// }
			}

			.contentHotSearch {
				// display: flex;
				// flex-wrap: wrap;
				width: 100%;

				.item {
					display: flex;
					width: 100%;
					height: 100%;
					border-bottom: 1px solid #C0C0C0;
					padding: 20rpx 0;

					.index {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 100rpx;

					}

					.icon {
						width: 50rpx;
						// height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;

					}

					.name {
						flex: 1;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						overflow: hidden;
						color: #333;
						font-weight: normal;

						>view {
							&:nth-child(2) {
								color: #ccc;
								font-size: 26rpx;
								font-weight: normal;
							}
						}

					}

					&:nth-child(1),
					&:nth-child(2),
					&:nth-child(3) .index {
						color: #d43c33;
						font-weight: bold;
					}
				}


			}
		}


		// 搜索 ，搜索出来的列表
		.sousuoListItem {
			padding: 20rpx;
			margin-top: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;

			.sousuoListItem-gequ {
				.title {
					margin-bottom: 20rpx;

					>text {
						color: #d43c33;
					}
				}

				// 歌曲类型 的搜索
				.sousuoListItem-gequ-item {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					height: 80rpx;
					padding: 0 10rpx;
					overflow: hidden;
					border-bottom: 1px solid #C0C0C0;

					>text {
						width: 50rpx;
						height: 80rpx;
						line-height: 80rpx;
						margin-right: 20rpx;
						animation: search1 2s linear infinite;

					}

					.name {
						display: flex;
						align-items: center;
						height: 80rpx;
						flex: 1;

						>text {
							&:nth-child(2) {
								font-size: 26rpx;
								color: #C8C7CC;
							}
						}
					}
				}
			}

			// 专辑 类型的搜索
			.sousuoListItem-zhuanji {
				.title {
					margin-bottom: 20rpx;

					>text {
						color: #d43c33;
					}
				}

				.sousuoListItem-zhuanji-item {
					display: flex;
					flex-wrap: wrap;

					.sousuoListItem-zhuanji-item-box {
						width: 50%;
						height: 370rpx;

						image {
							width: 300rpx;
							height: 260rpx;
						}
					}
				}

			}

			// 歌手 类型的搜索
			.sousuoListItem-geshou {
				.title {
					margin-bottom: 20rpx;

					>text {
						color: #d43c33;
					}
				}

				.sousuoListItem-geshou-item {
					display: flex;
					flex-wrap: wrap;

					.sousuoListItem-geshou-item-box {
						width: 50%;
						height: 370rpx;

						image {
							width: 300rpx;
							height: 260rpx;
						}
					}
				}

			}

			//  歌单类型的搜索
			.sousuoListItem-gedan {
				.title {
					margin-bottom: 20rpx;

					>text {
						color: #d43c33;
					}
				}

				.sousuoListItem-gedan-item {
					display: flex;
					height: 120rpx;
					margin-bottom: 20rpx;

					image {
						width: 120rpx;
						height: 120rpx;
						margin-right: 20rpx;
					}

					.shou {
						width: 150rpx;
						line-height: 120rpx;
						color: #C8C7CC;
						margin-right: 20rpx;
					}

					.author {
						width: calc(100% - 310rpx);
						height: 120rpx;
						line-height: 120rpx;
					}
				}
			}

			// 用户 类型的搜索
			.sousuoListItem-yonghu {
				.title {
					margin-bottom: 20rpx;

					>text {
						color: #d43c33;
					}
				}

				.sousuoListItem-yonghu-item {
					display: flex;
					flex-wrap: wrap;

					.sousuoListItem-yonghu-item-box {
						width: 50%;
						height: 400rpx;

						image {
							width: 300rpx;
							height: 260rpx;
						}

						.signature {
							font-size: 26rpx;
							color: #C8C7CC;
						}
					}
				}
			}

			// mv 类型的搜索
			.sousuoListItem-mv {
				.title {
					margin-bottom: 20rpx;

					>text {
						color: #d43c33;
					}
				}

				//  mv 的搜索页面
				.sousuoListItem-mv-item {
					display: flex;
					flex-wrap: wrap;

					.sousuoListItem-mv-item-box {
						width: 50%;
						height: 308rpx;


						image {
							// position: relative;
							text-align: center;
							width: 320rpx;
							height: 180rpx;


						}

						.author {
							font-size: 26rpx;
							color: #C8C7CC;
						}

						.playCount {
							position: absolute;
							text-align: center;
							left: 0;
							top: 0;
							height: 40rpx;
							width: 320rpx;
							font-size: 26rpx;
							color: #FFFFFF;
							line-height: 40rpx;
							background-color: rgba(0, 0, 0, .4);

						}


					}
				}

			}


			//   视频  类型 的搜索页面

			.sousuoListItem-sp {
				.title {
					margin-bottom: 20rpx;

					>text {
						color: #d43c33;
					}
				}

				//  mv 的搜索页面
				.sousuoListItem-sp-item {
					display: flex;
					flex-wrap: wrap;

					.sousuoListItem-sp-item-box {
						width: 50%;
						height: 308rpx;


						image {
							// position: relative;
							text-align: center;
							width: 320rpx;
							height: 180rpx;


						}

						.author {
							font-size: 26rpx;
							color: #C8C7CC;
						}

						.playCount {
							position: absolute;
							text-align: center;
							left: 0;
							top: 0;
							height: 40rpx;
							width: 320rpx;
							font-size: 26rpx;
							color: #FFFFFF;
							line-height: 40rpx;
							background-color: rgba(0, 0, 0, .4);

						}


					}
				}

			}
		}

	}
</style>
